<template>
  <view class="goodDetail">
    <!-- <image class="goodsImg" :src="basicInfo.image" mode=""></image> -->
    <uv-swiper indicatorActiveColor="#fff" :indicator="true" height="750rpx" :list="basicInfo.slider_image"></uv-swiper>
    <view class="block">
      <view class="title" style="margin-top: 15rpx;display: flex;justify-content: space-between;align-items: center;">
        {{basicInfo.store_name}}
        <uv-number-box v-model="basicInfo.num" @change="handleAddNumber"></uv-number-box>
      </view>
      <view class="table">
        <view class="table-item">
          <view class="unit">
            单位
          </view>
          <view class="value">
            {{basicInfo.unit_name}}
          </view>
        </view>
        <view class="table-item">
          <view class="unit">
            库存
          </view>
          <view class="value">
            {{basicInfo.stock}}
          </view>
        </view>
        <view class="table-item">
          <view class="unit">
            预计销售周期
          </view>
          <view class="value">
            {{basicInfo.estimated_sales_cycle}}天
          </view>
        </view>

        <block v-if="detailDesc.params && detailDesc.params.length>0">
          <view class="table-item" style="display: flex;" v-for="(item, index) in detailDesc.params" :key="index">
            <view class="unit">
              {{item.name}}
            </view>
            <view class="value">
              {{item.value}}
            </view>
          </view>
        </block>
        <view class="table-item">
          <view class="unit">
            供应公司
          </view>
          <view class="value">
            {{detailDesc.merchant?detailDesc.merchant.mer_name:''}}
          </view>
        </view>
      </view>
      <view class="shoujia">
        <view class="shoujia-fl">
          采购价: ￥{{basicInfo.price}}
        </view>
        <view class="shoujia-fr">
          批量售价: ￥{{basicInfo.ot_price}}
        </view>
      </view>
      <view class="lines">
        <view class="lines-fl"></view>
        <view class="lines-title">商品详情</view>
        <view class="lines-fl"></view>
      </view>
    </view>
    <view class="parse-content" style="padding: 0 30rpx 30rpx;box-sizing: border-box;">
      <uv-parse :content="richText" :lazy-load="true"></uv-parse>
    </view>
    <view class="content">
      <view class="recommend">
        <image class="recommend-img" src="../../static/images/recommend.png" mode=""></image>
      </view>
      <view class="recommend-menu" v-if="recommend && recommend.length>0">
        <view class="recommend-list" v-for="(item, index) in recommend" :key="index" @click="refresh(item)">
          <image class="img" :src="item.image" mode=""></image>
          <view class="info">
            <view class="title">
              {{item.store_name}}
            </view>
            <view class="label" v-if="item.labels && item.labels.length>0">
              <text style="margin-right: 15rpx;" class="txt" v-for="(item, index) in item.labels">{{item}}</text>
            </view>
            <view class="footer">
              <view class="footer-item">
                <view class="unit">单位</view>
                <view class="valResult">{{item.unit_name}}</view>
              </view>
              <view class="footer-item">
                <view class="unit">库存</view>
                <view class="valResult">{{item.stock}}</view>
              </view>
              <view class="footer-item">
                <view class="unit">采购价</view>
                <view class="valResult">￥{{item.price}}</view>
              </view>
              <view class="footer-item">
                <view class="unit">批量售价</view>
                <view class="valResult">￥{{item.ot_price}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
    </view>
    <view style="width: 100%;height: 116rpx;"></view>
    <view class="footer">
      <view class="btn-fl" @click="addCar">
        加入果篮
      </view>
      <view class="btn-fr" @click="toPay">
        立即购买
      </view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        basicInfo: {},
        detailDesc: {},
        richText: "",
        recommend: [],
        params: {
          product_id: "",
          product_attr_unique: "",
          cart_num: 1,
          is_new: 0
        }
      }
    },
    onLoad(option) {
      console.log("商品id", option.id);
      this.getBasicInfo(option.id);
      this.getDetailDesc(option.id);
    },
    methods: {
      refresh(item) {
        uni.navigateTo({
          url: `/pages/home/goodDetail?id=${item.product_id}`
        })
      },
      handleAddNumber(e){
        setTimeout(() => {
          console.log("商品数量", e.value);
          this.params.cart_num = e.value;
        }, 500)
      },
      addCar() {
        console.log("params", this.params);
        reqApi.addBuyCar(this.params).then(res => {
          console.log("加入果篮成功");
          uni.showToast({
            title: "加入果篮成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
        })
      },
      toPay() {
        this.params.is_new = 1;
        reqApi.addBuyCar(this.params).then(res => {
          let cart_id = [];
          cart_id.push(res.data.cart_id);
          console.log("下单cart_ids", cart_id);
          uni.navigateTo({
            url: `/pages/home/placeOrder?cart_id=` + encodeURIComponent(cart_id)
          })
        })
      },
      getBasicInfo(id) {
        reqApi.basicInfo({
          id
        }).then(res => {
          console.log("商品基本信息", res);
          res.data.num = 1;
          this.basicInfo = res.data;
          this.params.product_id = res.data.product_id;
          this.params.product_attr_unique = res.data.sku[''].unique;
        })
      },
      getDetailDesc(id) {
        reqApi.detailDesc({
          id
        }).then(res => {
          console.log("商品详情信息", res);
          this.detailDesc = res.data;
          this.richText = res.data.content.content;
          this.recommend = res.data.merchant.recommend;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .goodsImg {
    width: 750rpx;
    height: 750rpx;
  }

  .lines {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;

    .lines-fl {
      flex: 1;
      width: 100%;
      height: 2rpx;
      background: #eee;
    }

    .lines-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      margin: 20rpx 90rpx;
    }
  }

  .content {
    padding: 0 30rpx;
    box-sizing: border-box;

    .recommend {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;

      .recommend-img {
        width: 100%;
        height: 40rpx;
      }
    }

    .recommend-menu {
      .recommend-list {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
        box-sizing: border-box;
        border-bottom: 2rpx solid #eee;

        .img {
          width: 180rpx;
          height: 180rpx;
          margin-right: 18rpx;
        }

        .info {
          flex: 1;

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
          }

          .label {
            margin: 12rpx 0 16rpx 0;

            .txt {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #EEA800;
              border-radius: 8rpx;
              border: 2rpx solid #EEA800;
              padding: 4rpx 8rpx;
              box-sizing: border-box;
            }
          }

          .mb {
            display: flex;

            .footer-item:first-child {
              padding-left: 0 !important;
            }

            .footer-item:last-child {
              padding-right: 0 !important;
              border-right: 0;
            }

            .footer-item {
              padding: 0 28rpx;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;
              border-right: 2rpx solid #eee;

              .unit {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
              }

              .valResult {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #222222;
              }
            }
          }
        }

      }
    }
  }

  .footer {
    padding: 30rpx 60rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background: #fff;
    z-index: 100;

    .btn-fl {
      width: 300rpx;
      height: 88rpx;
      border-radius: 200rpx;
      border: 2rpx solid #EEA800;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #EEA800;
      text-align: center;
      line-height: 88rpx;
    }

    .btn-fr {
      width: 300rpx;
      height: 88rpx;
      background: #EEA800;
      border-radius: 200rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .goodDetail {
    background: #fff;



    .block {
      padding: 0 30rpx;
      box-sizing: border-box;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #222222;
      }

      .table {
        display: flex;
        background: #F5F5F5;
        margin: 20rpx 0;
        padding: 30rpx;
        box-sizing: border-box;
        justify-content: space-between;

        .table-item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .unit {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
          }

          .value {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
          }
        }
      }

      .shoujia {
        display: flex;
        justify-content: space-between;

        .shoujia-fl {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #666666;
        }

        .shoujia-fr {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #FF4F44;
        }
      }


    }
  }
</style>